<template>
    <div class="address">
        <titleBar title="地址添加" /> 
        <amap :site="citySelected" :cb="mapCB" :getCityCallback="getCityCallback" />
        <div class="hanlde-inner">
            <div class="item-input-box">
                <input placeholder="请输入联系人名称" v-model="realName" class="item-input" />
                <div class="cross flex flex-center-y" v-if="realName" v-on:click="realName = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
            <div class="item-input-box">
                <input placeholder="请输入联系方式" v-model="phone" class="item-input" />
                <div class="cross flex flex-center-y" v-if="phone"  v-on:click="phone = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
            <div class="flex item flex-center-y no-bottom-radius" v-on:click="onopenCity">
                <div class="name">约定地点</div>
                <div class="inner">
                    <span class="tip">{{citySelected ? citySelected : '请选择'}}</span>
                    <!-- <span v-else class="data-name">{{payOrderUpDoorDateCelectActive}}</span> -->
                </div>
                <i class="iconfont i-go icon-iconfonticonfonti2copycopy"></i>                
            </div>
            <div class="line"></div>
            <div class="flex item flex-center-y no-top-radius no-margin-top">
                <div class="name" style="color: #ccc" v-if="!nearestJunction">具体定点位置</div>
                <div class="name" v-else>{{nearestJunction}}</div>
            </div>
            <div class="item-input-box">
                <input placeholder="地址详细备注" v-model="addressBak" class="item-input" />
                <div class="cross flex flex-center-y" v-if="addressBak" v-on:click="addressBak = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
        </div>
        <div class="button-box">
            <div class="button" v-on:click="add">添加</div>
        </div>    
        <div class="upDoor-popup" v-show="openCity">
            <div class="mask"></div>
            <div class="inner">
                <div class="flex handleColum flex-space-x">
                    <span class="close" v-on:click="openCity = false">取消</span>
                    <span class="done" v-on:click="cityDone">完成</span>
                </div>
                <van-picker ref="ct" :columns="cityList" @change="cityChange" />
            </div>
        </div>
    </div>
</template>
<script>
import titleBar from '@/components/title_bar/index.vue'
import amap from './amap/index.vue'
import {defaultCityList} from './constant.js'
export default {
    components: {
        titleBar,
        amap,
    },
    data(){
        return {
            realName: '',
            phone: '',
            addressBak: '',
            openCity: false,
            cityList: defaultCityList,
            cityPick: void 0,
            citySelected: '',
            city2ColumnIndex: 0,
            nearestJunction: ''
        }
    },
    methods: {
        add(){
        },
        cityChange(picker, values){
            // console.log(picker, values)
            // console.log(values)
            this.cityPick = values
            this.city2ColumnIndex = picker.getColumnIndex(1)
        },
        onopenCity(){
            this.openCity = true
            setTimeout(() => {
                this.$refs.ct.setColumnIndex(1, this.city2ColumnIndex)
            }, 200)
        },
        cityDone(){
            this.openCity = false
            if(!this.cityPick){
                // console.log(this.cityList)
                this.cityPick = [
                    this.cityList[0].values[0],
                    this.cityList[1].values[0]
                ]
            }
            this.citySelected = this.cityPick[1]
        },
        mapCB(positionResult){
            // console.log(positionResult)
            this.nearestJunction = positionResult.nearestJunction
        },
        getCityCallback(city){
            let districtIndex  = this.cityList[1].values.findIndex(e => e === city.district)
            // this.$refs.ct.setColumnIndex(1, this.city2ColumnIndex)
            this.city2ColumnIndex = districtIndex
            this.citySelected = city.district
        }
    }
}
</script>

<style lang="scss" scoped>
.address{ 
    .hanlde-inner{
        position: fixed;
        top: .9rem;
        left: 0px;
        width: 100%;
        // background: #000;
        // padding-bottom: 50px;
        .item-size{
            width: 7.02rem;
            background-color: #fff;
            margin: auto;
            margin-top: .22rem;
            font-size: .28rem;
            box-sizing: border-box;
            border-radius: .1rem;
            overflow: hidden;
        }   
        .go-icon{
            font-size: .24rem;
            color: #ababab;
        }
        .no-bottom-radius{        
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .no-top-radius{        
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }
        .no-margin-top{
            margin-top: 0px;
        }
        .line{
            height: 1px;
            background-color: #E5E5E5;
            width: 7.02rem;
            margin: auto;
        }
        .item-input-box{
            @extend .item-size;
            position: relative;
            .item-input{
                width: 90%;
                height: 1rem;
                border-width: 0px;
                padding-left: .24rem;
                box-sizing: border-box;
            }
            .cross{
                position: absolute;
                z-index: 2;
                top: 0px;
                right: 0px;
                bottom: 0px;
                height: 1rem;
                padding-right: .24rem;
                padding-left: .24rem;
                background-color: #fff;
                .iconfont{
                    font-size: .3rem;
                    color: #ccc;
                }
            }
        }
        .item{
            @extend .item-size;
            padding: .36rem .24rem;
            box-sizing: border-box;
            .name{
                color: #656566;
                margin-right: .4rem;
                white-space: nowrap;
                font-size: .28rem;
            }
            .inner{
                flex: auto;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: .28rem;
                .tip{
                    text-align: right;
                    color: #ccc;
                    font-size: .28rem;
                    margin-right: .2rem;
                    display: block;
                }
                .data-name{
                    text-align: right;
                    font-size: .28rem;
                    margin-right: .2rem;
                    display: block;
                }
            }
            i{
                @extend .go-icon;
            }
        }
    }
}
.button-box{
    position: fixed;
    width: 100%;
    bottom: 0px;
    background-color: rgba(255,255,255,.79);
    height: 1.60rem;
    box-shadow:0px 2px 8px 4px rgba(216,216,216,0.5);
    // opacity:0.7994;
    z-index: 9;
    .button{
        width: 7.02rem;
        height: .88rem;
        background: $color-primary;
        border-radius: .1rem;
        margin: auto;
        text-align: center;
        line-height: .88rem;
        color: #fff;
        font-size: .28rem;
        margin-top: .35rem;
    }
}
.upDoor-popup{
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 100%;
    left: 0px;
    z-index: 88;
    .mask{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }
    .inner{
        position: absolute;
        bottom: 0px;
        width: 100%;
        .handleColum{
            padding: .29rem .24rem;
            color: #656565;
            background: #fff;
            font-size: .32rem;
            .done{
                color: #5E8EFE;
            }
        }
    }
}
</style>
